<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<script src="https://unpkg.com/vue@3"></script>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-plus"></script>
	<!-- axios -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<title>Docker Applications by SSE</title>
</head>

<body>
	<div id="app" align="center">
		<el-table :data="tableData" border stripe style="width: 80%">
			<el-table-column type="index" label="No." align="center" width="60"></el-table-column>
			<el-table-column prop="Names" label="Name" align="center" width="200"></el-table-column>
			<el-table-column prop="Image" label="Image" align="center" width="600"></el-table-column>
			<el-table-column prop="State" label="State" align="center" width="160"></el-table-column>
			<el-table-column prop="Status" label="Status" align="center" width="200"></el-table-column>
			<el-table-column prop="Ports[0].PublicPort" label="Port" align="center"></el-table-column>
			<el-table-column label="Link" width="180" align="center">
				<template #default="scope">
					<el-button @click.stop="openLink(scope.row)" size="small" type="success">Open</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
	<script>
		const App = {
			data() {
				return {
					tableData: []
				};
			},
			mounted() {
				let eventSource = new EventSource("/sse/connect");
				eventSource.onmessage = (event) => {
					this.tableData = eval(event.data);
				};
			},
			methods: {
				openLink(row) {
					console.log("openLink for " + row.Ports[0].PublicPort);
					window.open(window.location.protocol + "//" + window.location.hostname + ":" + row.Ports[0].PublicPort);
				}
			}
		};
		const app = Vue.createApp(App);
		app.use(ElementPlus);
		app.mount("#app");
	</script>
</body>